<template>
	<view>
		<u-popup v-model="showLogin" mode="center" :mask-close-able="false">
			<view class="cu-dialog" @tap.stop style="background: none;overflow: visible;">
				<view class="modal-box">
					<view class="detail">
						<view class="title1">您还没有登录</view>
						<view class="title2">登录才可获取相关数据</view>
					</view>
					<view class="btn-box y-f">
						<button class="cu-btn login-btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx">立即登录</button>
						<!-- <button class="cu-btn login-btn" @tap="onLogin">立即登录</button> -->
						<button class="cu-btn close-btn" @tap="hideModal">取消</button>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		computed: {
			showLogin: {
				get() {
					return this.showLoginTip;
				},
				set(val) {
					this.$u.vuex('showLoginTip', val)
				}
			}
		},
		methods: {
			hideModal() {
				this.showLogin = false;
			},
			onLogin() {
				this.showLogin = false;
			},
			appLoginWx(e) {
				debugger
				let that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res2) => {
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => { //这里请求接口
											console.log(res2.code);
											console.log(info);
											that.$u.api.get_app_id({
												code: res2.code
											}).then(res => {
												console.log(res)
											})
										},
										fail: () => {
											uni.showToast({
												title: "微信登录授权失败",
												icon: "none"
											});
										}
									})

								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none"
									});
								}
							})

						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	// 登录提示
	.modal-box {
		width: 610rpx;
		border-radius: 20rpx;
		background: #fff;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		padding-bottom: 30rpx;
		padding-top: 30rpx;

		.head-bg {
			width: 100%;
			height: 210rpx;
		}

		.detail {
			text-align: center;

			.title1 {
				color: #46351b;
				font-size: 35rpx;
				font-weight: bold;
			}

			.title2 {
				font-size: 28rpx;
				color: #999;
				padding-top: 20rpx;
			}
		}

		.btn-box {
			margin-top: 80rpx;

			.login-btn {
				width: 492rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 35rpx;
				font-size: 28rpx;
				color: rgba(#fff, 0.9);
			}

			.close-btn {
				width: 492rpx;
				height: 70rpx;
				color: #e9b766;
				font-size: 26rpx;
				margin-top: 20rpx;
				background: none;
			}
		}
	}
</style>
